// 歌手详情
import { Toast,Button } from 'vant';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getSingerDetailApi } from '@/api/request';
import ProImage from '@/components/ProImage';
import './singer.scss';

const Singer = ({
    components: {
        Button
    },
    setup(){
        const state = reactive({
            name: '',
            hotSongs: [],
            picUrl: ''
        });
        const router = useRouter();
        const initPage = () => {
            if(router?.currentRoute?.value?.query?.id){
                const ID = router.currentRoute.value.query.id;
                getSingerDetailApi(ID).then(res => {
                    console.log(res);
                    if(res.code === 200){
                        const artist = res.artist;
                        Object.assign(state, {
                            hotSongs: artist.hotSongs,
                            picUrl: artist.picUrl,
                            name: artist.name
                        })

                    }
                });
                console.log(router.currentRoute.value.query.id)
            }else {
                Toast('网络繁忙，请重新加载~')
            }
        };
        initPage();
        return () => (
            <div className="singerPage">
                 <div className="navBar" onClick={() => router.back()}>
                        <div className="icon">
                            <van-icon size={20} name="arrow-left" />
                        </div>
                        <div className="name">
                            {state.name}
                        </div>
                </div>
                <div className="headerImg">
                    <ProImage src={state.picUrl} alt='歌手详情图片' />
                    <div className="filter" />
                    <div className="btn">收藏</div>
                </div>
            
            </div>
        )
    }
});
export default Singer;